<template>
  <div>
     <!-- 对象语法 -->
     <div v-bind:class="{active:isActive,'text-danger':hasError}">class对象语法</div>
     <!-- 数组语法 -->
     <div v-bind:class="[isActive ? activeClass : '',errorClass]">class数组语法</div>
     <!-- style的对象语法 -->
     <div v-bind:style="{color:activeColor,fontSize:fontSize + 'px'}">style对象语法</div>
     <!-- 数组语法 -->
     <div v-bind:style="[styleColorTwo,styleSize]">style数组语法</div>
  </div>
</template>

<script>
export default {
   data(){
    return {
        isActive:true,
        hasError:false,
        activeClass:'active',
        errorClass:'text-danger',
        activeColor:'pink',
        fontSize:30,
        styleColorTwo:{
            color:'orange'
        },
        styleSize:{
            fontSize:'23px',
        }
    }
   }
}
</script>

<style>
.active {
    color: blue;
}
.text-danger{
    color:red;
}
</style>